<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script src="./axios.min.js"></script>
    <script>
      btn.onclick = async function () {
        // 1. axios(配置对象)
        //#region
        // const promise = axios({
        //   method: 'post',
        //   url: 'http://localhost:5000/test',
        //   // 注意: 发送get请求,参数的属性叫params
        //   // 发送post请求,参数的属性叫data
        //   // params: {
        //   //   aaa: 1,
        //   //   bbb: 2,
        //   // },
        //   // 注意: axios发送post请求.请求主体中数据的格式不是url编码而是json格式
        //   // url编码: application/x-www-form-urlencoded
        //   // json编码: application/json
        //   data: {
        //     aaa: 1,
        //     bbb: 2,
        //   },
        // })
        // #endregion

        // 2. axios(url[,配置对象])
        //#region
        // const promise = axios('http://localhost:5000/test', {
        //   method: 'post',
        //   data: {
        //     xxx: 123,
        //   },
        // })
        //#endregion

        // 3. axios.get(url[,配置对象])
        //#region
        // const promise = axios.get('http://localhost:5000/test', {
        //   params: {
        //     bbb: 'abc',
        //   },
        // })
        //#endregion

        // 4. axios.post(url[,data[,配置对象]])
        //#region
        // const promise = axios.post(
        //   '/test',
        //   { yyy: 'yyy' },
        //   {
        //     // baseURL和url在发送请求的时候自动拼接. baseURL在前,url在后
        //     baseURL: 'http://localhost:5000',
        //     // headers是往请求头中添加内容
        //     headers: { xxxx: '111' },
        //   }
        // )
        //#endregion

        // 5. 创建axios实例
        // 实际开发几乎都会使用axios实例发送请求,因为创建实例的时候可以配置baseURL等配置项.后续使用axios实例发送请求时,配置项直接生效.可以有效的简化代码
        // 创建axios实例
        const axInstance = axios.create({
          baseURL: 'http://localhost:5000',
          headers: { yyy: 123 },
        })

        const promise = axInstance.get('/test', {
          params: {
            bbb: 'abc',
          },
        })
        const promise1 = axInstance.post('/test', {
          ccc: 'def',
        })
        const result = await promise
        const result1 = await promise1
        // 注意: result是一个axios包装之后的对象.result.data才是响应主体中的数据
        console.log(result)
        console.log(result1)
      }
    </script>
  </body>
</html>
